<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="true"/>

    <title>Pointer events</title>

    <link rel="stylesheet" href="../examples.css">
    <style>
      nav{
        justify-content : unset;
      }

      #editor {
        height : 50vh;
      }

      textarea {
        width: 100vw;
        height: calc(50vh - 58px);
      }

      #pointerEvents {
        position: absolute;
        right: 12px;
        bottom: 12px;
      }

    </style>

    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script type="text/javascript" src="../../dist/iink.min.js"></script>
  </head>

  <body>
    <div>
      <div id="editor" touch-action="none"></div>
      <textarea id="pointerEventsObject">{ "events": [{
    "pointerType": "PEN",
    "pointerId": 1,
    "x": [128, 125, 122, 119, 118, 117, 116, 117, 119, 123, 127, 135, 139, 141, 144, 144, 143, 142, 141, 142],
    "y": [83, 91, 99, 107, 114, 121, 125, 120, 112, 101, 90, 76, 70, 66, 76, 88, 101, 111, 118, 123],
    "t": [1516190046205, 1516190046247, 1516190046264, 1516190046280, 1516190046297, 1516190046314, 1516190046330, 1516190046380, 1516190046397, 1516190046413, 1516190046430, 1516190046447, 1516190046463, 1516190046480, 1516190046547, 1516190046563, 1516190046581, 1516190046597, 1516190046614, 1516190046630],
    "p": [0.5, 0.7076987214308235, 0.8060672826037246, 0.8060672826037246, 0.785875329883628, 0.785875329883628, 0.7185264889882718, 0.7461846839143089, 0.8024894359144054, 0.6578786777951477, 0.6578786777951477, 0.5984465727129564, 0.7880849230110567, 0.7292125754002905, 0.6768853685004259, 0.6535898384862245, 0.6389126863152722, 0.6829846120277299, 0.785875329883628, 0.7461846839143089]
  },{
    "pointerType": "PEN",
    "pointerId": 1,
    "x": [117, 122, 128, 139, 146],
    "y": [105, 105, 106, 107, 106],
    "t": [1516190046870, 1516190046930, 1516190046947, 1516190046963, 1516190046980],
    "p": [0.5, 0.7763932022500211, 0.7681880209236327, 0.6676543814462531, 0.785875329883628]
  }]}</textarea>
      <button class="classic-btn" id="pointerEvents">Process</button>
    </div>
    <script>
      const editorElement = document.getElementById('editor');
      const pointerEventsElement = document.getElementById('pointerEvents');
      const pointerEventsObjectElement = document.getElementById('pointerEventsObject');

      pointerEventsElement.addEventListener('click', () => {
        const pointerEventsObject = JSON.parse(pointerEventsObjectElement.value);
        console.log('Pointer events being processed', pointerEventsObject);
        editorElement.editor.pointerEvents(pointerEventsObject);
      });

      /**
       * Attach an editor to the document
       * @param {Element} The DOM element to attach the ink paper
       * @param {Object} The recognition parameters
       */
      iink.register(editorElement, {
        recognitionParams: {
          server: {
            scheme: 'https',
            host: 'webdemoapi.myscript.com',
            applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
            hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
          }
        }
      });

      window.addEventListener('resize', () => {
        editorElement.editor.resize();
      });
    </script>
  </body>

</html>
